<script setup>
</script>

<template>
<!--
  <a href="/">首页</a>
  <a href="/Hello">Hello</a>
  <a href="/Haha">Haha</a>
-->

  <router-link to="/">首页</router-link>
  <router-link to="/hello">Hello</router-link>
  <router-link to="/haha">Haha</router-link>
  <router-link to="/haha/111">Haha111</router-link>
  <router-link to="/haha/abc">HahaAbc</router-link>
  <router-link to="/user/007">用户中心</router-link>
  <hr/>
  <router-view></router-view>


<!-- 1. 整合vue-router -->
<!-- 2. 配置vue-router
      2.1 配置路由表
      2.2 创建路由器
 -->
<!-- 3. Vue实例使用router -->
<!-- 4. 配置router-link He router-view -->
</template>

<style scoped>
a {
  margin-left: 10px;
}
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
